<script setup>
import {ref} from 'vue'

const dialogVisible = ref(false)
const emits = defineEmits(['submit'])
const props = defineProps({
  modalWidth: {
    type: [String, Number],
    default: '500px'
  },
  modalTitle: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  enableSubmit:{
    type: Boolean,
    default: true
  }
})

const handleOpen = () => dialogVisible.value = true

const handleClose = () => dialogVisible.value = false

const handleSubmit = () => {
  emits('submit')
}

defineExpose({
  handleOpen,
  handleClose
})

</script>

<template>
  <a-modal
      v-model:open="dialogVisible"
      :title="modalTitle"
      :width="modalWidth"
      :before-close="handleClose"
      :destroy-on-close="true"
      :close-on-click-modal="false"
  >
    <template #footer>
      <div class="dialog-footer">
        <a-button @click="dialogVisible = false">{{ cancelText }}</a-button>
        <a-button type="primary" @click="handleSubmit" v-if="enableSubmit">
          {{ confirmText }}
        </a-button>
      </div>
    </template>
    <div class="modal-container">
      <slot></slot>
    </div>
  </a-modal>
</template>

<style lang="scss" scoped>
:deep(.ant-modal-body) {
  max-height: calc(80vh - 150px);
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #e3e3e6;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
}

.modal-container{
  max-height: 600px;
  overflow-y: auto;
}
</style>
